<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      body {
        font-family: sans-serif;
        margin: 1rem;
      }

      h1 {
        font-size: 1.5rem;
        line-height: 2rem;
        margin: 0 0 1rem;
      }

      li {
        margin-bottom: 1rem;
      }

      .instruction {
        display: none;
      }

      .require-input .instruction {
        display: block;
      }

      .form-section {
        display: none;
        margin-bottom: 1rem;
      }

      .require-input .form-section {
        display: block;
      }

      .form-section input {
        box-sizing: border-box;
        line-height: 1.5rem;
        width: 100%;
      }

      .primary-button {
        background: #1a73e8;
        border-radius: 0.5rem;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        line-height: 1.5rem;
        padding: 0.25rem 0.75rem;
        text-decoration: none;
      }

      .primary-button:hover {
        background: #4285f4;
      }

      .primary-button.disabled {
        background: #80868b;
        pointer-events: none;
      }

      .redirect-url {
        display: inline-block;
        font-family: monospace;
        font-weight: bold;
        overflow-wrap: anywhere;
      }
    </style>
  </head>

  <body>
    <section>
      <h1>HEY_LLM setup</h1>
      <ol class="instruction">
        <li>
          Visit
          <a
            href="https://console.cloud.google.com/apis/credentials/"
            target="_blank"
            >"API &amp; Services" &gt; "Credentials"</a
          >
          in Google Cloud Console.
        </li>
        <li>
          Select the OAuth Client ID to use. The Application type should be "Web
          Application".
        </li>
        <li>
          Add <span class="redirect-url">(loading...)</span> to Authorized
          redirect URIs.
        </li>
        <li>
          Copy and paste Client ID and Client secret to the input form below and
          click "Authorize".
        </li>
      </ol>
      <div class="form-section">
        <input
          type="text"
          name="client_id"
          id="client_id"
          placeholder="OAuth Client ID"
        />
      </div>
      <div class="form-section">
        <input
          type="text"
          name="client_secret"
          id="client_secret"
          placeholder="OAuth Client Secret"
        />
      </div>
      <div>
        <a
          href="#"
          id="authorize"
          target="_blank"
          class="primary-button disabled"
          >Authorize</a
        >
      </div>
    </section>

    <script>
      const clientIDInput = document.getElementById('client_id');
      const clientSecretInput = document.getElementById('client_secret');
      const authorizeButton = document.getElementById('authorize');
      const BUTTON_LABEL = {
        authorize: 'Authorize',
        checking: 'Checking...',
      };

      const checkIfReadyToAuthorize = () => {
        google.script.run
          .withSuccessHandler(value => {
            if (value) {
              authorizeButton.classList.remove('disabled');
              authorizeButton.setAttribute('href', value);
            } else {
              authorizeButton.classList.add('disabled');
              authorizeButton.setAttribute('href', 'javascript:void(0)');
            }
            authorizeButton.textContent = BUTTON_LABEL.authorize;
          })
          .getAuthorizationUrl();
      };

      clientIDInput.addEventListener('input', () => {
        authorizeButton.classList.add('disabled');
        authorizeButton.setAttribute('href', 'javascript:void(0)');
        authorizeButton.textContent = BUTTON_LABEL.checking;
        google.script.run
          .withSuccessHandler(value => {
            checkIfReadyToAuthorize();
          })
          .setClientID(clientIDInput.value);
      });

      clientSecretInput.addEventListener('input', () => {
        authorizeButton.classList.add('disabled');
        authorizeButton.setAttribute('href', 'javascript:void(0)');
        authorizeButton.textContent = BUTTON_LABEL.checking;
        google.script.run
          .withSuccessHandler(value => {
            checkIfReadyToAuthorize();
          })
          .setClientSecret(clientSecretInput.value);
      });

      google.script.run
        .withSuccessHandler(value => {
          document.querySelectorAll('.redirect-url').forEach(el => {
            el.textContent =
              'https://script.google.com/macros/d/' + value + '/usercallback';
          });
        })
        .getScriptId();

      google.script.run
        .withSuccessHandler(value => {
          if (value) {
            authorizeButton.textContent = BUTTON_LABEL.checking;
            checkIfReadyToAuthorize();
          } else {
            document.body.classList.add('require-input');
          }
        })
        .isOAuthClientPreset();
    </script>
  </body>
</html>
